<template>
  <div id="app" class="wrap clearfix">
    <div class="local-con clearfix">
      <div class="sideL">
        <div class="l-topic">
          <h1>{{ contentData.title }}</h1>
          <div class="sub-tit">
            <i class="i-zan"></i>
            51人体验过
            <span class="time" style="margin-left: 20px;">
              <em>阅读 {{ contentData.viewnum }}</em>
            </span>
            <span class="time">
              旅游攻略
              <em>{{ time }}</em>
            </span>
          </div>
          <div class="user_list">
            <div class="clearfix">
              <div class="author">
                <a href="javascript:;" target="_blank">
                  <img
                    src="../../public/img/wKgEaVy2nheAN9y5AAorszCM1vQ56.jpeg"
                    alt=""
                    width="90"
                    height="90"
                  />
                </a>
              </div>
              <div class="info">
                <div class="in-t">
                  <a href="javascript:;" target="_blank">
                    <span class="name">叩丁狼官方</span>
                  </a>
                  <span class="more">6篇游记 429个粉丝</span>
                </div>
                <p>
                  人有欢乐，也有苦衷。所谓的完美，其实只是来源于我们的心灵。人生不能重新来过，每个人也不可能重复站在同一个路口。但请不要害怕选择，因为选择没有绝对的好与坏，每种选择都会为你带来一种不一样的感受和别样的精彩。
                </p>
              </div>
              <div class="contact user-home">
                <a href="javascript:;" target="_blank">
                  <i></i>
                  <p>TA的窝</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="l-topic">
          <div class="_j_content">
            <div v-html="contentData.content"></div>
          </div>
        </div>

        <div class="copyRight m_t_20">
          <p style="text-align: left;">
            本文著作权归 骡窝窝 所有，任何形式转载请联系作者。©2019 骡窝窝自由行
            <a
              class="r-report"
              style="display: inline; float: right; color: rgb(153, 153, 153);"
            >
              举报
            </a>
          </p>
        </div>
        <div class="l-comment">
          <div class="clearfix com-form">
            <div class="img">
              <img src="../../public/img/wKgED1uqIreAU9QZAAAXHQMBZ74008.png" />
            </div>
            <div class="fm-tare user-log">
              <textarea
                id="content"
                class="_j_comment_content"
                v-model="content"
              ></textarea>
              <button type="button" class="_j_save_comment" @click="addComment">
                评论
              </button>
            </div>
          </div>
          <div id="strategyComment" class="com-box">
            <h2>
              评论（
              <span class="_comment_num">{{ comments.totalElements }}</span>
              ）
            </h2>
            <ul id="comments">
              <li
                v-for="item in comments.content"
                :key="item.id"
                style="display: flex;"
              >
                <div>
                  <img
                    src="../../public/img/default.jpg"
                    alt=""
                    width="48"
                    height="48"
                    style="border-radius: 50%;"
                  />
                </div>
                <div style="margin-left: 16px;">
                  <h3 style="font-size: 18px; color: #ccc;">
                    {{ item.nickname }}
                  </h3>
                  <h4 style="font-size: '12px'; color: #999; margin-top: 8px;">
                    <span>{{ item.createTime.substring(0, 10) }}</span>
                    &nbsp;
                    <span>{{ item.createTime.substring(12, 19) }}</span>
                  </h4>
                  <div style="margin-top: 8px;">{{ item.content }}</div>
                </div>
              </li>
              <div style="float: right;">
                <div style="float: left;">
                  <span style="line-height: 30px;">
                    共{{ comments.totalPages }}页 /
                    {{ comments.totalElements }}条&nbsp;&nbsp;&nbsp;
                  </span>
                </div>
                <div
                  id="pagination"
                  class="jq-pagination"
                  style="display: inline;"
                >
                  <a
                    class="prev"
                    href="javascript:void(0);"
                    jp-role="prev"
                    jp-data="0"
                  >
                    上一页
                  </a>
                  <a
                    href="javascript:void(0);"
                    jp-role="page"
                    jp-data="1"
                    class="active"
                  >
                    1
                  </a>
                  <a
                    class="next"
                    href="javascript:void(0);"
                    jp-role="next"
                    jp-data="2"
                  >
                    下一页
                  </a>
                  <a
                    class="last"
                    href="javascript:void(0);"
                    jp-role="last"
                    jp-data="1"
                  >
                    尾页
                  </a>
                </div>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div class="sideR">
        <div class="side_inner _j_sticky_block">
          <div class="_j_other_column">
            <div class="bar-sar clearfix">
              <a href="javascript:;" title="评论" class="_j_goto_comment">
                <i class="i01"></i>
                <em class="replay_num">{{ contentData.replynum }}</em>
              </a>
              <div class="bs_collect">
                <a
                  href="javascript:void(0);"
                  title="收藏"
                  class="bs_btn btn-collect"
                >
                  <i class="collect_icon i02"></i>
                  <em class="favorite_num">{{ contentData.favornum }}</em>
                </a>
              </div>
              <div class="bs_share">
                <a href="javascript:;" title="分享" class="btn-share bs_btn">
                  <i class="i03"></i>
                  <em>{{ contentData.sharenum }}</em>
                </a>
              </div>
              <a href="javascript:;" title="顶" class="_j_support_btn">
                <i class="i05"></i>
                <em class="support_num">{{ contentData.thumbsupnum }}</em>
              </a>
            </div>
            <div class="bs_pop clearfix" style="display: none;">
              <a
                title="分享到新浪微博"
                rel="nofollow"
                role="button"
                data-japp="sns_share"
                data-jappfedata=""
                data-key="wb"
                data-title="盘点 | 广州周边好玩的地方有哪些？"
                data-content="盘点 | 广州周边好玩的地方有哪些？"
                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                class="sina"
              ></a>
              <a
                title="分享到QQ空间"
                rel="nofollow"
                role="button"
                data-japp="sns_share"
                data-jappfedata=""
                data-key="qz"
                data-title="盘点 | 广州周边好玩的地方有哪些？"
                data-content="盘点 | 广州周边好玩的地方有哪些？"
                data-pic="http://b4-q.mafengwo.net/s13/M00/7F/2D/wKgEaVyLhXKABFf5AAI6AbEkm0o40.jpeg?imageView2%2F2%2Fw%2F640%2Fh%2F360%2Fq%2F90"
                data-url="http://www.mafengwo.cn/gonglve/ziyouxing/1775.html"
                class="zone"
              ></a>
              <a
                title="分享到微信"
                rel="nofollow"
                role="button"
                data-japp="weixin_dialog_share"
                data-jappfedata=""
                data-wx_qr="http://www.mafengwo.cn/qrcode.php?text=https%3A%2F%2Fm.mafengwo.cn%2Fgonglve%2Fziyouxing%2F1775.html&amp;size=150&amp;eclevel=H&amp;logo=&amp;__stk__=d3c9fd1d23b028a45ec5b71a30324cb9_391fafc14c22754068d1543e8cfc5d04"
                data-detail="1775"
                class="weixin"
              ></a>
            </div>
          </div>
        </div>
        <div class="side-sales">
          <h3>本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:;" target="_blank">
                <span class="image">
                  <img
                    src="../../public/img/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                  />
                </span>

                <div
                  title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                  class="title"
                >
                  广州长隆野生动物世界门票 随买随用 ／广州...
                </div>
                <span class="price">¥260</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <span class="image">
                  <img
                    src="../../public/img/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                  />
                </span>

                <div
                  title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                  class="title"
                >
                  广州长隆欢乐世界门票 当天可买／广州长隆旅...
                </div>
                <span class="price">¥187</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <span class="image">
                  <img
                    src="../../public/img/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                  />
                </span>

                <div
                  title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                  class="title"
                >
                  当天可订/广州长隆野生动物世界门票/长隆野生...
                </div>
                <span class="price">¥256</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <span class="image">
                  <img
                    src="../../public/img/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                  />
                </span>

                <div
                  title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                  class="title"
                >
                  广州长隆水上乐园门票 一票通玩（电子票／当地...
                </div>
                <span class="price">¥122</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <span class="image">
                  <img
                    src="../../public/img/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                  />
                </span>

                <div
                  title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                  class="title"
                >
                  寻味广州1日游（6人小团·探黄埔军校陈家祠·...
                </div>
                <span class="price">¥288</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ApiStrategiesDetail,
  ApiComments,
  ApiAddComment,
} from '../utils/api.js'
export default {
  data() {
    return {
      id: '',

      // 保存数据
      contentData: '',

      // 评论数据
      comments: '',

      // 创建时间
      time: '',

      // 评论内容
      content: '',

      // 主题名称
      titel: '',

      baseurl: 'http://kumanxuan1.f3322.net:8809',
    }
  },
  created() {
    document.scrollingElement.scrollTop = 0
    this.id = this.$route.query.id
    this.getDate()
    this.getComments()
  },
  methods: {
    async getDate() {
      let { data: res } = await ApiStrategiesDetail({
        id: this.id,
      })
      this.contentData = res.data
      this.time = res.data.createTime.substring(0, 10)
    },

    // 评论请求
    async getComments() {
      let { data: res } = await ApiComments({
        currentPage: 1,
        strategyId: this.id,
      })
      this.comments = res.data
    },

    // 添加评论
    async addComment() {
      let { data: res } = await ApiAddComment({
        strategyId: this.id,
        strategyTitle: this.contentData.title,
        content: this.content,
      })
      console.log(res)
      if (res.code !== 200) return alert("请登录！")

      this.getComments()
      this.content = ''
    },
  },
}
</script>

<style scoped>
@import '../css/strategyDetail.css';
@import '../css/jqPagination.css';
</style>
